"use client";

import { AreaChart } from "@/components/ui/charts";
import { EmptyState } from "@/components/ui/states";
import { fmtCompact, fmtMw } from "@/lib/format";

/**
 * Facilities by opening year (cumulative). Known MW is charted separately (own axis) only when the
 * market publishes any MW figure — never on a dual axis.
 */
export function GrowthChart({ data }: { data: Array<{ year: number; facilities: number; knownMw: number | null }> }) {
  const pts = [...data].filter((d) => Number.isFinite(d.year)).sort((a, b) => a.year - b.year);
  if (pts.length < 2) return <EmptyState compact title="Not enough dated history" description="Growth appears once several facilities with a published opening year are indexed in this market." />;
  const hasMw = pts.some((d) => d.knownMw !== null && d.knownMw > 0);
  return (
    <div className={hasMw ? "grid gap-6 md:grid-cols-2" : undefined}>
      <div>
        <div className="label-caps mb-2">Facilities (cumulative)</div>
        <AreaChart series={[{ name: "Facilities", data: pts.map((d) => ({ x: d.year, y: d.facilities })), color: "var(--ink)" }]} height={170} format={(v) => fmtCompact(v, 0)} ariaLabel="Facilities by opening year" />
      </div>
      {hasMw && (
        <div>
          <div className="label-caps mb-2">Known MW</div>
          <AreaChart series={[{ name: "Known MW", data: pts.map((d) => ({ x: d.year, y: d.knownMw })), color: "var(--accent)" }]} height={170} format={(v) => fmtMw(v)} ariaLabel="Known operational MW by opening year" />
        </div>
      )}
    </div>
  );
}